<html>
<head>
    <title>HTML 文档结构</title>
</head>
<body>
    <div class="group">
        <!--输入框  -->
        <input type="text" class="todovalue" name="todovalueName" id="todovalueId" placeholder="请输入TODO内容" onkeydown="valueChange(event)" />
        <input type="button" value="BUTTON2" onclick="handleClick()"></input>
        <button type="button" id="button3">BUTTON3</button>
        <!-- 遍历数据 -->
        <div id="todoList">
            <div class="item" id="item0">
                <input class="item-chk" type="checkbox" />
                <div class="item-sp">吃饭0</div>
                <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(0)"></input>
            </div>
            <div class="item" id="item1">
                <input class="item-chk" type="checkbox" />
                <div class="item-sp">吃饭1</div>
                <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(1)"></input>
            </div>
            <div class="item" id="item2">
                <input class="item-chk" type="checkbox" />
                <div class="item-sp">吃饭2</div>
                <input id="item-del-2" class="item-del" type="button" value="删除" onclick="handleDelClick(2)"></input>
            </div>
        </div>
        <!-- 操作的footer -->
    </div>
</body>
<script lang=“javascript”>
    var index=0;
    function init(){
        document.getElementById("button3").onclick=handleClick;
    }
    function valueChange(e){
        console.log(e);
        if(event.keyCode==13)
        {
            handleClick();
        }

    }
    function handleClick(){
        var temp=document.getElementsByName("todovalueName")[0].value;
        var div=document.createElement("div");
        div.innerText=temp;
        document.getElementById("todoList").append(div);

    }
    function test1(index){
        //console.log("test12111");
        //document.getElementById("todoList").children[index].style="backgroud-color:red";
        //document.getElementById("item-del-"+index).style="opacity:1;";

    }
    function test2(index){
        //console.log("2222222");
        //document.getElementById("todoList").children[index].style="";
        //document.getElementById("item-del-"+index).style="opacity:0;";
    }
    function handleDelClick(index){
        var arr=document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item"+index).remove();
    }
    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .group {
        border: 1px solid blue;
        padding: 10px;
        border-radius: 4px;
    }
    .item{
       
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .item:hover{
        background-color: aqua;
        transform: scale(1.2);
    }
    .item-sp{
        flex-grow:1;

    }
    .item-del{
        background-color: red;
        border:0px;
        color:aliceblue;
        opacity: 0;
    }
    .item:hover .item-del{
        opacity: 1;
    }
    .todovalue{
        border: 2px solid #333333;
        padding:6px;
        outline:none;
    }
    .todovalue:focus{
        box-shadow: 0px 0px 9px #4086cd;
        border:2px solid #4086cd;
        outline:none;
    }
</style>
</html>

